<template>
  <Teleport to="body" v-if="showLoading">
    <div ref="loading" class="loading-container">
      <div class="loading-content">
        <div class="loading-icon"></div>
      </div>
      <div class="loading-shoadow"></div>
    </div>
  </Teleport>
</template>
<script lang="ts" setup>
import { useLoading } from './useLoading'
const { showLoading, loadingTitle } = useLoading()
</script>
<style scoped>
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.loading-content {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-icon {
  width: 70px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-color: #006be6;
  animation: linear rotate 2s infinite;
}

.loading-shoadow {
  width: 80px;
  height: 10px;
  background-color: #7cb2eff1;
  border-radius: 10px;
  animation: linear trans 2s infinite;
}

@keyframes rotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }

  12.5% {
    transform: translateY(30%) rotate(45deg);
  }

  25% {
    transform: translateY(0) rotate(90deg);
  }

  37.5% {
    transform: translateY(30%) rotate(135deg);
  }

  50% {
    transform: translateY(0) rotate(180deg);
  }

  62.5% {
    transform: translateY(30%) rotate(225deg);
  }

  75% {
    transform: translateY(0) rotate(270deg);
  }

  87.5% {
    transform: translateY(30%) rotate(315deg);
  }

  100% {
    transform: translateY(0) rotate(360deg);
  }
}
@keyframes trans {
  0% {
    width: 70px;
  }

  12.5% {
    width: 80px;
  }

  25% {
    width: 70px;
  }

  37.5% {
    width: 80px;
  }

  50% {
    width: 70px;
  }

  62.5% {
    width: 80px;
  }

  75% {
    width: 70px;
  }

  87.5% {
    width: 80px;
  }

  100% {
    width: 70px;
  }
}
</style>
